<template>
  <el-container class="">
    <el-header style="text-align: right; font-size: 12px">
      <div class="toolbar">
        <el-input v-model="sousuo"
                  style="width: 360px"
                  placeholder="输入用户名、标题或搜索内容"
                  prefix-icon="Search"
                  clearable />
        <p class="but sousuo"
           @click="search()">搜索</p>
        <p class="but sousuo"
           @click="chongzhi()">重置</p>
      </div>
    </el-header>

    <el-main>
      <el-scrollbar>
        <el-table :data="currentPageData"
                  empty-text="暂无数据">
          <el-table-column prop="forum_id"
                           label="论帖ID"
                           width="100" />
          <el-table-column label="用户头像"
                           width="100">
            <template #default="scope">
              <img :src="scope.row.head_img"
                   alt="用户头像"
                   style="width: 50px; height: 50px; border-radius: 50%;">
            </template>
          </el-table-column>
          <el-table-column prop="username"
                           label="用户名"
                           width="120" />
          <el-table-column prop="title"
                           label="标题"
                           width="120" />
          <el-table-column label="内容"
                           width="180">
            <template #default="scope">
              <p class="luncontent">
                {{ scope.row.content }}
              </p>
            </template>
          </el-table-column>
          <el-table-column prop="publish_time"
                           label="发表时间"
                           width="140" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="small"
                         @click="handleEditpass(scope.row.forum_id)">详情</el-button>
              <el-button size="small"
                         type="danger"
                         @click="handleDelete(scope.row.forum_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-main>
    <!-- 分页器 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   background
                   :page-size="pageSize"
                   layout="prev, pager, next"
                   :total="userlist.length">
    </el-pagination>
    <!-- 论贴详情 -->
    <el-dialog v-model="xiangDialogVisible"
               :close-on-click-modal="false"
               width="800"
               center>
      <div class="xiangqing">
        <div class="title">
          {{ title }}
        </div>
        <div class="content">

          {{ content }}
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="xiangDialogVisible = false"
                     type="primary">关闭</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 是否删除提示框 -->
    <el-dialog v-model="centerDialogVisible"
               :close-on-click-modal="false"
               :title="Warning"
               width="500"
               center>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="centerDialogVisible = false">取消</el-button>
          <el-button type="primary"
                     @click="queding()">
            确定
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-container>
</template>



<script setup>
import { onMounted, ref } from 'vue'
import { ElMessage } from 'element-plus'
import axios from '@/axios'
let list = ref([])
let userlist = ref([])

// 分页器
let currentPage = ref(1)
let pageSize = ref(8)
let currentPageData = ref([])

const handleSizeChange = (newSize) => {
  pageSize.value = newSize
  handleCurrentChange(currentPage.value)
}

const handleCurrentChange = (newPage) => {
  currentPage.value = newPage
  const start = (newPage - 1) * pageSize.value
  const end = start + pageSize.value
  currentPageData.value = userlist.value.slice(start, end)
}
//搜索
let sousuo = ref('')
const search = () => {
  if (sousuo.value == '') {
    ElMessage({
      message: '搜索内容为空，请重新输入。',
      type: 'error'
    })
  } else {
    userlist.value = list.value.filter((item) => {
      return (
        item.username.includes(sousuo.value) ||
        item.title.includes(sousuo.value) ||
        item.content.includes(sousuo.value)
      )
    })
    handleCurrentChange(currentPage.value)
    if (userlist.value.length == 0) {
      userlist.value = list.value
      handleCurrentChange(currentPage.value)
      ElMessage({
        message: '未找到相关内容，请重新输入。',
        type: 'error'
      })
    }
  }
}
const chongzhi = () => {
  userlist.value = list.value
  handleCurrentChange(currentPage.value)
  sousuo.value = ''
}
let Warning = ref('')
let butindex = ref('')
let centerDialogVisible = ref(false)
let xiangDialogVisible = ref(false)
let title = ref('')
let content = ref('')
//查看详情
const handleEditpass = (index) => {
  butindex.value = index
  xiangDialogVisible.value = true
  list.value.forEach((item) => {
    if (item.forum_id == index) {
      title.value = item.title
      content.value = item.content
    }
  })
}
//删除
const handleDelete = (index) => {
  butindex.value = index
  centerDialogVisible.value = true
  Warning.value = `确定删除论帖${index}？`
}
let queding = () => {
  centerDialogVisible.value = false
  axios
    .post('/ltshan', { id: butindex.value })
    .then((d) => {
      if (d == '删除成功') {
        ElMessage({
          message: `论帖${butindex.value}已删除！`,
          type: 'success'
        })
        gaindatas()
        sousuo.value = ''
      }
    })
    .catch((err) => console.log(err))
}
// 获取数据
const gaindatas = () => {
  axios
    .get('/forums')
    .then((d) => {
      //过滤数据
      list.value = d
      userlist.value = list.value
      handleCurrentChange(currentPage.value)
      // console.log(userlist.value)
    })
    .catch((err) => console.log(err))
}
onMounted(() => {
  gaindatas()
})
</script>

<style scoped lang="less">
.sousuo {
  width: 60px;
  height: 32px;
  line-height: 32px;
  border-radius: 16px;
  margin-left: 10px;
  padding: 0 10px;
}
.xiangqing {
  width: 100%;
  max-height: 600px;
}
.title {
  width: 100%;
  padding: 15px 20px;
  font-size: 20px;
  font-weight: 600;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: #cdbf62 1px solid;
}
.content {
  width: 100%;
  font-size: 16px;
  max-height: 400px; /* 设置元素的最大高度 */
  overflow-y: auto; /* 当内容超出最大高度时，显示垂直滚动条 */
  overflow-x: hidden; /* 如果不需要水平滚动条，则隐藏它 */
  background-color: #fcfcfa;
  padding: 20px;
  text-indent: 2em;
  border-bottom: #cdbf62 1px solid;
}
.luncontent {
  //超出三行变小点
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #cdbf62;
  color: var(--el-text-color-primary);
}
</style>

